<template>
  <div class="dashboard-container app-container">
    <!-- <div>首页</div> -->
    <el-row>
      <el-col :span="18">
        <el-row class="add_jump card">
          <el-col :span="8" class="add_jump-card">
            <div @click="dialogFormVisible = true">
              <img width="80" :src="addInterest" alt="" />
              <span class="add_jump-btn">添加投顾</span>
            </div>
          </el-col>
          <el-col :span="8" class="add_jump-card">
            <div @click="addOrUpdateHandle">
              <img width="80" :src="addStrategy" alt="" />
              <span class="add_jump-btn">添加策略</span>
            </div>
          </el-col>
          <el-col :span="8" class="add_jump-card">
            <div @click="addStrategyCombHandle">
              <img width="80" :src="addCombination" alt="" />
              <span class="add_jump-btn">创建组合</span>
            </div>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="6">
        <div class="unread-msg card">
          <div
            class="msg-text"
            v-for="msgitem in msgList"
            :key="msgitem.msgid"
            @click="jump('privatePolicy')"
          >
            <!-- <div class="msg-text"> -->
            <span> ·【消息】{{ msgitem.result }} </span>
            <!-- <span> ·【消息】{{ msgitem }} </span> -->
            <span class="right-btn">去处理</span>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <sunnyrainy :mt="21">
          <span slot="title" style="padding-bottom: 12px">私募市场晴雨表 </span>
          <div slot="headLeft">
            <div class="flex wrap">
              <chart1Head
                ref="chart1Head"
                type="sunnyrainy"
                :more_chart1_nav_list2="more_sunrain_chart1_nav_list2"
                :segment.sync="sunrainSegment"
                :year.sync="sunrainYear"
              ></chart1Head>
            </div>
          </div>
          <!-- 晴雨表柱状图 -->
          <sunrainChart
            ref="sunrainChart"
            :segment="sunrainSegment"
            width="100%"
            :height="230"
          />
        </sunnyrainy>
      </el-col>
    </el-row>
    <div class="card">
      <!-- 看板tabs -->
      <sunnyrainy :mt="21">
        <div slot="title" class="nav">
          <div
            :class="{ 'nav-item': true, navActive: navActive == item.boardId }"
            v-for="item in tabsBulletinBoard"
            :key="item.boardId"
            @click="checkTabs(item)"
          >
            {{ item.boardName }}
          </div>
        </div>
        <div slot="headLeft">
          <div class="flex wrap">
            <chart1Head
              ref="chart1Head"
              :more_chart1_nav_list2="yearList"
              :segment.sync="tabsSegment"
              :year.sync="tabsYear"
            ></chart1Head>
            <el-popover
              placement="bottom-end"
              width="200"
              v-model="setTabsVisible"
              trigger="click"
            >
              <div slot="reference">
                <div style="padding: 6px 7px; cursor: pointer">
                  <i
                    class="iconfont icon-gengduo-shuxiang"
                    style="font-size: 20px"
                  ></i>
                </div>
              </div>
              <div class="set-tabs">
                <div
                  class="md-chunk flex-h-sb"
                  v-for="item in tabsBulletinBoard"
                  :key="item.boardId"
                >
                  <div class="md-tit tooltip">{{ item.boardName }}</div>
                  <div>
                    <el-button type="text" @click="addHandle(item)">
                      编辑
                    </el-button>
                    <el-button type="text" @click="delBoard(item)">
                      删除
                    </el-button>
                  </div>
                </div>
                <el-button
                  size="mini"
                  style="margin: 16px; border: 1px dashed #d9d9d9; width: 140px"
                  @click="addHandle('', 'addTabs')"
                >
                  <i
                    class="iconfont icon-add-circle"
                    style="font-size: 12px"
                  ></i>
                  <span> 添加看板 </span>
                  <span> {{ tabsBulletinBoard.length }}/5 </span>
                </el-button>
              </div>
            </el-popover>
          </div>
        </div>
        <!-- 看板曲线 -->
        <chart
          id="contrastChart1"
          ref="contrastChart1"
          :userId="userId"
          :bulletinBoardList="activeBulletinBoardList"
          :segment="tabsSegment"
          :year="tabsYear"
          width="100%"
          :height="280"
          :id_index="chartIndex"
          :strategyList="strategyList"
          @addTabsBullet="addTabsBullet"
        />
      </sunnyrainy>
      <allStrategyOpen
        v-if="addOrUpdateVisible"
        title="添加策略（多选）"
        type="check"
        ref="addOrUpdate"
        :userId="userId"
        :surplusNum="10"
        :bulletinBoardList="activeBulletinBoardList"
        @selCheckctInvestName="selCheckctInvestNameHandle"
      ></allStrategyOpen>
    </div>
    <!-- 添加投顾 -->
    <addInvestManage
      :dialogFormVisible.sync="dialogFormVisible"
    ></addInvestManage>
    <!-- 添加策略 -->
    <addPolicyManage
      v-if="addPolicyManageVisible"
      :strategyPool="strategyPool"
      ref="addOpen"
      @closeOpen="jump_page()"
    ></addPolicyManage>
    <!-- 创建组合 -->
    <!-- <addOrUpdateOpen
      :addOrUpdateOpenVisible.sync="addOrUpdateOpenVisible"
    ></addOrUpdateOpen> -->
  </div>
</template>

<script>
import { msgNotification, findBoard } from "@/api/dashboard";
import add_strategy from "@/assets/add_strategy.png";
import add_interest from "@/assets/add_interest.png";
import add_combination from "@/assets/add_combination.png";
import { mapGetters } from "vuex";
import sunnyrainy from "./charts/sunnyrainy.vue";
import sunrainChart from "./charts/sunrainChart.vue";
import Chart from "./charts/lineEcharts.vue";
import chart1Head from "./components/chart1Head.vue";
import allStrategyOpen from "./components/allStrategyOpen.vue";
import addPolicyManage from "@/views/policyManage/add.vue";
// import addPolicyManage from "./components/addPolicyManage.vue";
import addInvestManage from "./components/addInvestManage.vue";
// import addOrUpdateOpen from "./components/addOrUpdateOpen.vue";
import { delBoard, addBoard } from "@/api/dashboard";
import { strategyType, findStrategyTypeByStrategyId } from "@/api/policyManage";

// import { time } from "echarts";

export default {
  name: "Dashboard",
  components: {
    sunnyrainy,
    chart1Head,
    Chart,
    allStrategyOpen,
    sunrainChart,
    addInvestManage,
    addPolicyManage
    // addOrUpdateOpen
  },
  data() {
    return {
      userId: "",
      navActive: "",
      tabsSegment: 1,
      tabsYear: "",
      dateFreq: undefined,
      defaultDateFreq: undefined,
      addStrategy: add_strategy,
      addInterest: add_interest,
      addCombination: add_combination,
      classifyId: null,
      strategyList: [],
      strategyPool: 0,
      chart1_nav_list: [
        // "成立以来",
        // "同区间",
        "最近一月",
        "最近三月",
        "最近半年"
        // "最近一年",
        // "今年以来",
      ],
      more_chart1_nav_list2: [],
      chart_date: [],
      oldDate: [],
      tabsBulletinBoard: [],
      chartIndex: [],
      msgList: [],
      contrastOptions_obj: [], //净值曲线
      activeBulletinBoardList: [],
      addOrUpdateVisible: false,
      setTabsVisible: false,
      dialogFormVisible: false,
      addPolicyManageVisible: false,
      // addOrUpdateOpenVisible: false,

      more_sunrain_chart1_nav_list2: [],
      yearList: [],
      dict: [],
      dict2: [],
      sunrainSegment: 1,
      sunrainYear: ""
    };
  },
  computed: {
    ...mapGetters(["roles"])
  },
  created() {
    if (!this.roles.includes("admin")) {
      this.currentRole = "editorDashboard";
    }
    this.userId = this.$store.state.user.userId;
    this.getMessage();
    this.findStrategyTypeByStrategyId();
    this.getStrategyType();
    this.findBoard("init");
  },
  watch: {},
  methods: {
    // sameSectionHandle(val) {
    //   this.sameSection = val;
    //   console.log(val);
    // },
    jump(name) {
      this.$router.push({
        path: name,
        query: {
          boardStatus: 1
        }
      });
    },

    addOrUpdateHandle() {
      this.addPolicyManageVisible = true;
      this.$nextTick(() => {
        if (this.$route.query.investName) {
          this.$refs.addOpen.init(
            "",
            this.dict,
            this.dict2,
            this.userId,
            this.$route.query.investName
          );
        } else {
          this.$refs.addOpen.init("", this.dict, this.dict2, this.userId);
        }
      });
    },
    addStrategyCombHandle() {
      this.$router.push({
        path: "/strategyComb/combManage/config",
        query: {
          type: "created"
        }
      });
    },
    getStrategyType() {
      strategyType().then((res) => {
        console.log("分类", res);
        this.dict = res.body;
      });
    },
    findStrategyTypeByStrategyId() {
      findStrategyTypeByStrategyId({
        userId: this.userId,
        strategyPool: this.strategyPool,
        strategyTypeStatus: 1
      }).then((res) => {
        this.dict2 = res.body;
      });
    },
    // 切换看板
    checkTabs(row) {
      this.navActive = row.boardId;
      this.activeBulletinBoardList = this.tabsBulletinBoard.filter((item) => {
        return item.boardId === this.navActive;
      });
      this.tabsSegment = 1;
      this.tabsYear = "";
      this.yearList = this.activeBulletinBoardList[0].yearList;
    },
    getMessage() {
      msgNotification({
        userId: this.userId
      })
        .then((res) => {
          this.msgList = res.body;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 获取看板
    findBoard(type, id) {
      findBoard({
        userId: this.userId
      })
        .then((res) => {
          if (type === "init") {
            this.navActive = res.body[0].boardId;
            this.activeBulletinBoardList = res.body.filter((item) => {
              return item.boardId === this.navActive;
            });
            this.yearList = this.activeBulletinBoardList[0].yearList;
          }
          this.tabsBulletinBoard = res.body;
          if (id) {
            this.activeBulletinBoardList = this.tabsBulletinBoard.filter(
              (item) => {
                return item.boardId === this.navActive;
              }
            );
          }
          return res;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 删除看板
    delBoard(row) {
      if (this.tabsBulletinBoard.length <= 1) {
        this.$message({
          message: "最少需要保留一个看板",
          warning: "warning"
        });
        return;
      }
      this.$confirm(`确认删除看板【${row.boardName}】？`, "提示", {
        type: "warning"
      })
        .then((_) => {
          delBoard({
            boardId: row.boardId
          }).then((res) => {
            if (res.code == 0) {
              this.$message({
                message: res.msg,
                type: "success",
                duration: 2000
              });
              this.navActive = this.tabsBulletinBoard[0].boardId;
              this.activeBulletinBoardList.splice(
                0,
                1,
                this.tabsBulletinBoard[0]
              );
              this.findBoard();
            }
          });
        })
        .catch((_) => {});
    },
    addTabsBullet(row) {
      this.addHandle(row);
    },
    // 选择看板曲线
    addHandle(row, type) {
      if (row) {
        this.navActive = row.boardId;
        this.activeBulletinBoardList = this.tabsBulletinBoard.filter((item) => {
          return item.boardId === this.navActive;
        });
      } else if (this.tabsBulletinBoard.length >= 5 && type === "addTabs") {
        this.$message({
          message: "最多添加5条数据看板",
          warning: "warning"
        });
        return;
      } else {
        this.activeBulletinBoardList = [
          {
            boardId: "",
            boardName: "",
            boardStrategyExtVos: [],
            createdTime: "",
            mark: ""
          }
        ];
      }
      this.addOrUpdateVisible = false;
      this.addOrUpdateVisible = true;

      this.$nextTick(() => {
        this.$refs.addOrUpdate.init();
      });
    },
    // 多选策略
    selCheckctInvestNameHandle(checkList, title, boardId) {
      this.strategyList = [];
      for (var i = 0; i < checkList.length; i++) {
        console.log(checkList[i]);
        this.strategyList.push({
          contextId: checkList[i].id,
          contextName: checkList[i].name,
          strategyStatus: checkList[i].type
        });
      }
      this.addBoard(title, boardId);
      this.addOrUpdateVisible = false;
    },
    // 跳转页面
    jump_page() {
      this.$router.push({
        path: "privatePolicy",
        query: {
          typePage: "add"
        }
      });
    },
    // 编辑添加看板
    addBoard(title, boardId) {
      console.log(this.strategyList);
      // return;
      addBoard({
        boardId: boardId || "",
        // boardId: 67,
        userId: this.userId,
        boardName: title,
        mark: "",
        strategyStatusDtos: this.strategyList
      })
        .then((res) => {
          if (res.code == 0) {
            this.$message({
              message: res.msg,
              type: "success",
              duration: 2000
            });
            this.navActive = res.body.boardId;

            this.findBoard("", res.body.boardId);
          }
        })
        .catch((err) => {
          console.log(err);
        });
    }
  }
};
</script>
<style scoped lang="scss">
.dashboard-container {
  background: #f0f2f5;

  .card {
    background: #fff;
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.06);
    border-radius: 4px;
  }
  .add_jump {
    padding: 22px 0;
    margin-right: 24px;

    &-card {
      cursor: pointer;
      border-right: 1px solid rgb(0 0 0 / 6%);
      &:last-child {
        border: 0;
      }
    }
    img {
      vertical-align: middle;
      margin: 0px 32px 0px 87px;
    }
    &-btn {
      color: rgba(0, 0, 0, 0.85);
      font-size: 24px;
    }
  }
  .unread-msg {
    padding: 16px;
    min-height: 124px;
    .msg-text {
      line-height: 46px;
      font-size: 14px;
      color: #333;
      cursor: pointer;
      &:hover {
        color: #1890ff;
      }
      .right-btn {
        display: block;
        float: right;
        line-height: 20px;
        width: 56px;
        height: 20px;
        background: #e6eefa;
        border-radius: 10px;
        margin-top: 10px;
        text-align: center;
        font-size: 12px;
      }
    }
  }
  .nav {
    height: 40px;
    display: flex;
    .nav-item {
      font-size: 16px;
      color: #666;
      border-bottom: 2px solid #fff;
    }
    div {
      text-align: center;
      line-height: 40px;
      margin-right: 48px;
      cursor: pointer;
    }
    .navActive {
      color: #262626;
      font-weight: bold;
      border-bottom: 2px solid rgb(79, 149, 221);
    }
  }
}
.set-tabs {
  .md-tit {
    color: #262626;
    font-size: 14px;
    padding: 10px 0;
  }
  .tooltip {
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    overflow: hidden;
    width: 100px;
  }
}
</style>
